<style scoped="scoped">
</style>
<template>
  <div>
    <el-dialog
      width="900px"
      :visible.sync="showModal"
      center
    >
      <div class="pick-list-content-box">
        <div class="pick-list-content" style="width: 750px;margin:0 auto;"><!--border: 1px solid #999;margin:0 auto;-->
          <div class="pick-content-title"
               style="width: 100%;height: 50px;text-align: center;font-size: 18px;font-weight: 600;line-height: 49px;">
            <span>居家智享订单</span>
          </div>
          <div class="pick-content-service">
            <table class="content-service" style="width: 100%;">
              <tr>
                <td width="50%">订单号:  <span>{{basicData.orderNo}}</span></td>
                <td width="50%" style="text-align: right">打印时间: <span>{{thisTime}}</span></td>
              </tr>
            </table>
            <table style="width:100%; border-collapse: collapse;">
              <thead>
                <tr style="line-height: 25px">

                  <th width="10%" :style="thStyle"></th>
                  <th width="25%" :style="thStyle"></th>

                  <th width="10%" :style="thStyle"></th>
                  <th width="10%" :style="thStyle"></th>

                  <th width="10%" :style="thStyle"></th>
                  <th width="10%" :style="thStyle"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td :style="thStyle4">下单时间</td>
                  <td :style="thStyle4">{{basicData.foundtime | unixTimestampFilter}}</td>
                  <td :style="thStyle4">下单方式</td>
                  <td colspan="3" :style="thStyle4">{{ basicData.orderWay === 1 ? '抛出竞价' : '定向师傅报价'}}</td>
                </tr>
                <tr>
                  <td :style="thStyle4">订单来源</td>
                  <td :style="thStyle4">{{ basicData.orderSource  | filterDataBaseDictionary }}</td>
                  <td :style="thStyle4">来源单号</td>
                  <td colspan="3" :style="thStyle4">{{basicData.orderSourceNo}}</td>
                </tr>
                <tr>
                  <td :style="thStyle4">服务类型</td>
                  <td :style="thStyle4">{{basicData.service}}</td>
                  <td :style="thStyle4">订单状态</td>
                  <td  colspan="3" :style="thStyle4">{{basicData.orderStatus | filterDataBaseDictionary}}</td>
                </tr>
                <tr>
                  <td :style="thStyle4">服务商</td>
                  <td :style="thStyle4">{{fhbOrderBiddingData.people}}</td>
                  <td :style="thStyle4">服务商电话</td>
                  <td colspan="3" :style="thStyle4">{{fhbOrderBiddingData.peopleUserPhone}}</td>
                </tr>

             <!--提货信息  服务类型 上门安装 和 维修-->
                <tr v-if="basicData.service !== '安装' && basicData.service !== '维修'">
                  <td :style="thStyle4">提货联系人</td>
                  <td :style="thStyle4">{{fhbOrderPickupInfoData.deliveryName}}</td>
                  <td :style="thStyle4">提货电话</td>
                  <td colspan="3" :style="thStyle4">{{fhbOrderPickupInfoData.deliveryPhone}}</td>
                </tr>
                <tr v-if="basicData.service !== '安装' && basicData.service !== '维修'">
                  <td :style="thStyle4">预计提货时间</td>
                  <td :style="thStyle4">{{basicData.predictDevliveryDate|unixTimestampFilter('YYYY-MM-DD')}}</td>
                  <td :style="thStyle4">是否到货</td>
                  <td colspan="3" :style="thStyle4">{{isArriva.text}}</td>
                </tr>
                <tr v-if="basicData.service !== '安装' && basicData.service !== '维修'">
                  <td :style="thStyle4">提货地址</td>
                  <td colspan="5" :style="addressStyle">{{fhbOrderPickupInfoData.deliveryProvince}}{{fhbOrderPickupInfoData.deliveryCity}}{{fhbOrderPickupInfoData.deliveryDistrict}}{{fhbOrderPickupInfoData.deliveryAddress}}</td>
                </tr>
                <tr v-if="basicData.service !== '安装' && basicData.service !== '维修'">
                  <td :style="thStyle4">提货备注</td>
                  <td colspan="5" :style="thStyle4">{{fhbOrderPickupInfoData.deliveryMemo}}</td>
                </tr>
         <!--提货信息 完-->

                <tr>
                  <td :style="thStyle4">收件人</td>
                  <td :style="thStyle4">{{fhbOrderConsigneeInfoData.consigneName}}</td>
                  <td :style="thStyle4">收件电话</td>
                  <td colspan="3" :style="thStyle4">{{fhbOrderConsigneeInfoData.consignePhone}}</td>
                </tr>
                <tr>
                  <td :style="thStyle4">预计服务时间</td>
                  <td :style="thStyle4">{{basicData.predictServiceDate | unixTimestampFilter('YYYY-MM-DD')}}</td>
                  <td :style="thStyle4">电梯</td>
                  <td :style="thStyle4">{{fhbOrderDeliveryInfoData.isElevator === 1 ? '有' : '无'}} </td>
                  <td :style="thStyle4">楼层</td>
                  <td :style="thStyle4">{{fhbOrderDeliveryInfoData.floor}} <span v-if="fhbOrderDeliveryInfoData.floor">楼</span></td>
                </tr>
                <tr>
                  <td :style="thStyle4">收件地址</td>
                  <td colspan="5" :style="addressStyle" style="text-align: left ">{{fhbOrderConsigneeInfoData.consigneProvince}}{{fhbOrderConsigneeInfoData.consigneCity}}{{fhbOrderConsigneeInfoData.consigneDistrict}}{{fhbOrderConsigneeInfoData.consigneAddress}}</td>
                </tr>
                <tr>
                  <td :style="thStyle4">核销类型</td>
                  <td :style="thStyle4">{{fhbOrderVerifiyData.verifiySource | filterDataBaseDictionary}}</td>
                  <td :style="thStyle4">核销单号</td>
                  <td colspan="3" :style="thStyle4">{{fhbOrderVerifiyData.verifiysourceNo}}</td>
                </tr>
                <tr>
                  <td :style="thStyle4">订单备注</td>
                  <td colspan="5" :style="thStyle4">{{basicData.memo}}</td>
                </tr>
              </tbody>
            </table>
            <div  style="width: 100%;height: 35px;text-align: center;
            line-height: 35px;border: 1px solid #666;border-top-width:0px;border-bottom-width:0px;box-sizing: border-box">
              <span style="font-size: 18px;font-weight: 600">产品信息</span>
            </div>
            <table style="width: 100%;border-collapse:collapse;">
              <tr>
                <th width="10%" :style="thStyle5">序号</th>
                <th width="25%" :style="thStyle5">产品类别</th>
                <th width="10%" :style="thStyle5">数量</th>
                <th width="30%" :style="thStyle5">产品说明</th>
              </tr>
              <tr v-for="(p, pIndex) in fhbOrderGoodsData" :key="pIndex">
                <td :style="thStyle4">{{pIndex + 1}}</td>
                <td :style="thStyle4">{{p.bigClass}} {{p.middleClass}}</td>
                <td :style="thStyle4">{{p.num}}</td>
                <td :style="thStyle4">{{p.memo}}</td>
              </tr>
              <tr>
                <td :style="thStyle4">总包件</td>
                <td :style="thStyle4">{{basicData.totalPackage}}</td>
                <td :style="thStyle4">总体积</td>
                <td :style="thStyle4">{{basicData.totalVolume}}</td>
              </tr>
              <tr>
                <td :style="thStyle4">总货值</td>
                <td :style="thStyle4">{{basicData.cargoPrice}}</td>
                <td :style="thStyle4">总重量</td>
                <td :style="thStyle4">{{basicData.totalWeight}}</td>
              </tr>
            </table>
            <div  style="width: 100%;height: 35px;text-align: center;
            line-height: 35px;border: 1px solid #666;border-top-width:0px;border-bottom-width:0px;box-sizing: border-box">
              <span style="font-size: 18px;font-weight: 600">费用信息</span>
            </div>
            <table style="width: 100%;border-collapse:collapse;">
              <tr>
                <th width="10%" :style="thStyle5">费用名称</th>
                <th width="25%" :style="thStyle5">时间</th>
                <th width="10%" :style="thStyle5">费用金额</th>
                <th width="30%" :style="thStyle5">备注</th>
              </tr>
              <tr v-for="(t, pIndex) in costTable" :key="pIndex">
                <td :style="thStyle4">{{t.costName}}</td>
                <td :style="thStyle4">{{t.foundDate | unixTimestampFilter}}</td>
                <td :style="thStyle4">{{t.money | decimalNumFilter}}</td>
                <td :style="thStyle4">{{t.memo}}</td>
              </tr>
              <tr>
                <td :style="thStyle4">总计</td>
                <td :style="thStyle4"></td>
                <td :style="thStyle4">{{totalMoney | decimalNumFilter}} 元</td>
                <td :style="thStyle4"></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="print()">打 印</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop, validateLODOP, dotData} from '@/utils'
// import {httpSuccessGetArr, httpSuccessPost, httpSuccessGet} from 'assets/scripts/base/util'
import {unixTimestampFilter, filterDataBaseDictionary, decimalNumFilter} from '@/filters'
// import store from 'store'
import moment from 'moment'
let LODOP = null
export default {
  name: 'printModal',
  props: {
    rowId: {
      type: String,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    decimalNumFilter,
    filterDataBaseDictionary
  },
  data() {
    return {
      showModal: false,
      thisTime: moment().format('YYYY-MM-DD'),
      basicData: {},
      fhbOrderBiddingData: {},
      fhbOrderPickupInfoData: {},
      fhbOrderConsigneeInfoData: {},
      fhbOrderVerifiyData: {},
      fhbOrderDeliveryInfoData: {},
      fhbOrderGoodsData: [],
      totalMoney: 0,
      costTable: [],
      // user: store.get('erpUser').user.name,
      thStyle: 'text-align: center;',
      thStyle4: 'text-align: center;border: 1px solid #666;',
      addressStyle: 'text-align: left;border: 1px solid #666;',
      thStyle5: 'text-align: center;border: 1px solid #666;font-weight: 600',
      thStyle1: 'text-align: center;border: 1px solid #666;width:100px',
      thStyle2: 'text-align: center;border: 1px solid #666;padding: 1px 2px;text-align:center;',
      thStyle3: 'text-align: center;border: 1px solid #666;padding: 1px 2px;text-align:center;width:200px',
      detail: {}
    }
  },
  created() {
  },
  computed: {
    isArriva() {
      if (dotData(this.basicData, 'isArriva') === 1) {
        return {value: 1, text: '是'}
      } else if (dotData(this.orderDetail, 'fhbOrder.isArriva') === 2) {
        return {value: 2, text: '否'}
      } else {
        return {}
      }
    }
  },
  mounted() {
    this.setStyle()
  },
  methods: {
    // 单条打印 或多条批量打印
    getDetail() {
      this.$ajax.get('/ms-fahuobao-order/FhbOrder/findFhbOrderParticulars', {orderId: this.rowId}).then(response => {
        if (response) {
          this.orderDetail = response.data
          this.basicData = dotData(response, 'data.fhbOrder') || {} // 订单基本信息
          this.fhbOrderBiddingData = dotData(response, 'data.fhbOrderBidding') || {} // 服务商 师傅
          this.fhbOrderGoodsData = dotData(response, 'data.fhbOrderGoods') || [] // 产品
          this.fhbOrderPickupInfoData = dotData(response, 'data.fhbOrderPickupInfo') || {} // 提货
          this.fhbOrderConsigneeInfoData = dotData(response, 'data.fhbOrderConsigneeInfo') || {} // 收件
          this.fhbOrderVerifiyData = dotData(response, 'data.fhbOrderVerifiy') || {} // 核销
          this.fhbOrderDeliveryInfoData = dotData(response, 'data.fhbOrderDeliveryInfo') || {} // 电梯
        }
      })
    },
    getCostData() {
      this.$ajax.get('/ms-fahuobao-order/FhbAdditional/findCostbyId', {orderId: this.rowId}).then(response => {
        if (response) {
          this.costTable = response.data
          this.totalMoney = 0
          for (let v of this.costTable) {
            this.totalMoney += v.money
          }
        }
      })
    },
    show() {
      getLodop().then(result => {
        LODOP = result
        if (!LODOP) {
          return
        }
        this.$nextTick(_ => {
          this.showModal = true
          this.setStyle()
          this.getDetail()
          this.getCostData()
        })
      })
      // this.showModal = true
      // this.setStyle()
      // this.$nextTick(_ => {
      //   this.getDetail()
      // })
    },
    hide() {
      this.showModal = false
    },
    print() {
      this.setStyle()
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.pick-list-content-box').each((index, v) => {
          console.log(v, '5555555555', index)
          // LODOP.SET_PRINT_PAGESIZE(1, 2180, 1400, 'A4')
          // 增加超文本项（纸张内容的上边距, 左距, 打印区域的宽度,  高, strHtml)
          LODOP.ADD_PRINT_HTM('1mm', '1mm', '218mm', '260mm', v.innerHTML)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          // LODOP.SET_PRINT_STYLEA('PRINT_INIT', 'Left', '5mm')
          LODOP.NewPage()
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
        // this.labelRecord()
      }
    },
    setStyle() {
      this.$nextTick(_ => {
        // setTimeout(_ => {
        //   $(this.$el).find('.pick-content-table').each((index, v) => {
        //     v.setAttribute('style', 'width: 100%;border-collapse:collapse;')
        //     $(v).find('th').each((index2, v2) => {
        //       v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
        //     })
        //     $(v).find('td').each((index2, v2) => {
        //       v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
        //     })
        //   })
        // }, 500)
      })
    }
    // 记录打印次数
    // labelRecord () {
    //   httpSuccessPost('/ms-warehouse-order/loading-order/print-list', this.idArr).then(response => {
    //     this.$emit('refresh')
    //     console.log('response', response)
    //   })
    // }
  }
}
</script>
